<template>
  <div class="xq-form-wrapper">
    <div class="xq-form-search">
      <div class="list-box-action">
        <div style="position:relative;">
          <a-input-search
            v-model="baseGet"
            placeholder="搜索姓名/手机号/公司名/分配人"
            style="width: 266px;margin-right:12px;"
            allowClear
            @search="onSearch"
          />
          <a-button icon="filter" style="color:#AAAAAA;" @click.stop="$store.commit('clientele/screenVisible', true)">
            <div v-if="$store.state.clientele.screenVisible" class="drawer">
              <div class="triangle"></div>
              <a-row class="search-box">
                <a-col :span="6" class="search-box-item">
                  <p>客户来源</p>
                  <a-select v-model="sourceType" allowClear placeholder="请选择" class="input">
                    <a-select-option :value="1">
                      分配
                    </a-select-option>
                    <a-select-option :value="2">
                      录入
                    </a-select-option>
                    <a-select-option :value="3">
                      领取
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="6" class="search-box-item">
                  <p>客户所属</p>
                  <a-input v-model="memberName" placeholder="请输入" class="input" allowClear />
                </a-col>
                <a-col :span="6" class="search-box-item">
                  <p>分配时间</p>
                  <a-range-picker valueFormat="YYYY-MM-DD" v-model="distributionTime" allowClear class="input" />
                </a-col>
                <a-col :span="6" class="search-box-item">
                  <p>拜访时间</p>
                  <a-range-picker valueFormat="YYYY-MM-DD" v-model="visitTime" allowClear class="input" />
                </a-col>
                <a-col :span="6" class="search-box-item">
                  <p>签约时间</p>
                  <a-range-picker valueFormat="YYYY-MM-DD" v-model="signTime" allowClear class="input" />
                </a-col>
              </a-row>
              <div
                :style="{
                  position: 'absolute',
                  right: 0,
                  bottom: 0,
                  width: '100%',
                  borderTop: '1px solid #E8E8E8',
                  padding: '10px 16px',
                  background: '#fff',
                  textAlign: 'right',
                  zIndex: 1
                }"
              >
                <a-button :style="{ marginRight: '12px' }" @click.stop="onClose">
                  取消
                </a-button>
                <a-button type="primary" @click.stop="onSearch">
                  查询
                </a-button>
              </div>
            </div>
          </a-button>
        </div>
        <div>
          <a-button style="margin-right:12px;" :disabled="selectedRowKeys.length <= 0" @click="onDistribution(null)" v-if="shows === 1">
            批量分配
          </a-button>
          <!-- <a-button @click="$router.push({ name: 'myClienteleImports' })" style="margin-right:12px;">
            导入客户
          </a-button> -->
          <a-button type="primary" @click="$router.push({ name: 'myClienteleAddClientele', query: { type: 2 } })">
            新增客户
          </a-button>
        </div>
      </div>
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'companyName'" :key="index">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <div class="overflows">
                {{ text }}
              </div>
            </a-tooltip>
          </span>
          <span v-else-if="col.dataIndex === 'companyAddress'" :key="index">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <div class="overflows">
                {{ text }}
              </div>
            </a-tooltip>
          </span>
          <span v-else-if="col.dataIndex === 'mark'" :key="index">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <div class="overflows">
                {{ text }}
              </div>
            </a-tooltip>
          </span>
          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a v-if="shows === 1" style="vertical-align: middle;" @click="onDistribution(record.id)">分配</a>
            <a v-else style="vertical-align: middle;" @click="onMoveSea(record.id)">移至公海</a>
            <tableActionPoint>
              <li @click="onMoveSea(record.id)" v-if="shows === 1">
                移至公海
              </li>
              <li @click="$router.push({ name: 'myClienteleEditClientele', query: { type: 2, id: record.id } })">
                编辑
              </li>
              <li @click="$router.push({ name: 'myClienteleMsgClientele', query: { type: 2, id: record.id, name: record.name } })">
                详情
              </li>
            </tableActionPoint>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <!-- <div class="list-table-footer" v-if="selectedRowKeys.length > 0">
      <div>
        已选择&nbsp;&nbsp; {{ selectedRowKeys.length }} 个 &nbsp;&nbsp;&nbsp;&nbsp;
        <a-button type="link" @click="selectedRowKeys = []">
          清除
        </a-button>
      </div>
      <div>
        <a-button style="margin-right: 12px;" @click="selectedRowKeys = []">取消</a-button>
        <a-button type="primary" @click="onAllShare">
          确认
        </a-button>
      </div>
    </div> -->
    <moveSea :visible.sync="moveSeaVisible" :id="moveSeaId" @upDate="onGetCustomerPage" />
    <distribution :visible.sync="distributionVisible" :distributionVal="distributionVal" @upDate="onGetCustomerPage" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getCustomerPage, getMyJurisdiction } from "../api";
import moment from "moment";
import moveSea from "../../component/moveSea";
import distribution from "../../component/distribution";
import tableActionPoint from "../../component/tableActionPoint";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: {
    moveSea,
    distribution,
    tableActionPoint
  },
  data() {
    return {
      distributionVisible: false,
      moveSeaVisible: false,
      selectedRowKeys: [],
      baseGet: "",
      sourceType: undefined,
      memberName: "",
      distributionTime: [],
      visitTime: [],
      signTime: [],
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      distributionVal: [],
      moveSeaId: "",
      shows: 0
    };
  },
  created() {
    this.onGetCustomerPage();
    this.onGetMyJurisdiction();
  },
  methods: {
    moment,
    async onGetMyJurisdiction() {
      try {
        const { data } = await getMyJurisdiction();
        this.shows = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetCustomerPage() {
      try {
        this.spinning = true;
        const { data } = await getCustomerPage({
          isPublic: false,
          type: 2,
          baseGet: this.baseGet,
          sourceType: this.sourceType || "",
          memberName: this.memberName,
          distributeOrGetTimeStart: this.distributionTime[0],
          distributeOrGetTimeEnd: this.distributionTime[1],
          visitTimeStart: this.visitTime[0],
          visitTimeEnd: this.visitTime[1],
          signTimeStart: this.signTime[0],
          signTimeEnd: this.signTime[1],
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.tableData.forEach(e => {
          const companyAddress = e.companyAddress ? e.companyAddress.split(",") : [];
          if (companyAddress.length >= 2) {
            // const a = companyAddress[1].split("/")[0] || "";
            // const b = companyAddress[1].split("/")[1] || "";
            // const c = companyAddress[1].split("/")[2] || "";
            e.companyAddress = companyAddress[2] ? companyAddress[2] : "";
          }
          const customerDemandSelectArr = ["商业险", "单工伤", "深圳五险", "发薪报税", "代理委托", "劳务派遣", "劳务外包", "灵活用工"];
          const customerDemand = e.customerDemand ? e.customerDemand.split(",") : [];
          customerDemand.map(m => {
            e.customerDemand = customerDemandSelectArr[m - 1];
          });

          const sourceArr = ["分配", "录入", "领取"];
          e.sourceType = sourceArr[e.sourceType - 1] || "录取";
          e.distributeOrGetTime = e.distributeOrGetTime ? moment(e.distributeOrGetTime).format("YYYY-MM-DD") : null;
          e.lastVisitTime = e.lastVisitTime ? moment(e.lastVisitTime).format("YYYY-MM-DD") : null;
          e.signingTime = e.signingTime ? moment(e.signingTime).format("YYYY-MM-DD") : null;
        });
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCustomerPage();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCustomerPage();
    },
    onDistribution(e) {
      if (e) {
        this.distributionVal = [e];
      } else {
        this.distributionVal = this.selectedRowKeys;
      }
      this.distributionVisible = true;
    },
    onMoveSea(e) {
      this.moveSeaId = e;
      this.moveSeaVisible = true;
    },
    init() {
      this.sourceType = undefined;
      this.memberName = "";
      this.distributionTime = [];
      this.visitTime = [];
      this.signTime = [];
    },
    onSearch() {
      this.$store.commit("clientele/screenVisible", false);
      this.pageNo = 1;
      this.onGetCustomerPage();
    },
    onClose() {
      this.$store.commit("clientele/screenVisible", false);
      this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
.list-box-action {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .search-box {
    padding: 42px 24px 0 24px;
    input {
      width: 80%;
    }
    select {
      width: 80%;
    }
    .search-box-item {
      // margin-right: 24px;
      margin-bottom: 24px;
      p {
        color: #636363;
        font-size: 14px;
        margin-bottom: 12px;
      }
      .input {
        width: 268px;
      }
    }
  }
  .triangle {
    position: absolute;
    top: -30px;
    left: 274px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
  }
  .drawer {
    width: calc(100vw - 278px);
    background: #fff;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    z-index: 99;
    height: 296px;
    position: absolute;
    top: 50px;
    left: -279px;
    text-align: left;
  }
}
.list-table-footer {
  z-index: 999;
  width: calc(100vw - 188px);
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background: #ffffff;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  position: fixed;
  right: 0;
  bottom: 0;
}
.overflows {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
